﻿<script lang="ts" setup>
import { ref, computed } from 'vue'
import { RedoOutlined } from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n'
import ColumnSetting from '@/components/Table/src/components/settings/ColumnSetting.vue'
import { useColumn } from '@/components/Table/src/hooks/useColumn'
import { BasicPageParams, BasicTableColumn } from '@/types'
import { FixedAssetsConsuming } from '@/types/modules/fixed-assets-consuming'
import { ApprovalStatus, approvalStatusOptions } from '@/types/modules/approval-status'
import { cloneDeep } from 'lodash-es'
import { isEmpty, isArray, isObject } from '@/utils/is'

const { t } = useI18n()
const props = defineProps({
  title: { type: String, default: () => 'Default Title' },
  columns: { type: Array<BasicTableColumn>, default: () => [] },
  tableData: { type: Array, default: () => [] },
  total: { type: Number, default: () => 0 },
  pageParams: { type: Object as PropType<BasicPageParams>, default: () => { } }
})
const emit = defineEmits(['add', 'refresh', 'check'])

const {
  indexColumnChecked,
  indexColumnData,
  actionsColumnData,
  selectColumnData,
  onChangeSelectColumn
} = useColumn<FixedAssetsConsuming>(props.pageParams)
const sortColumns = ref(cloneDeep(props.columns))

const tableColumns = computed(() => {
  let showColumns = sortColumns.value.filter(
    (item: BasicTableColumn) => item.checked
  )
  const indexColumn = indexColumnChecked.value ? [indexColumnData] : []
  return [...indexColumn, ...showColumns, actionsColumnData]
})

const resetColumn = () => {
  sortColumns.value = props.columns.map(item => {
    item.checked = true
    item.fixed = false
    return item
  })
  onChangeSelectColumn(true)
}
</script>
<template>
  <div class="table-list">
    <a-col :span="24" class="table-title">
      <h3>{{ props.title }}</h3>
      <div class="operate">
        <a-button type="primary" @click="emit('add')">{{
            '领用'
        }}</a-button>
        <a-divider type="vertical" />
        <a-tooltip class="operate-icon">
          <span class="refresh">
            <redo-outlined @click="emit('refresh')" />
          </span>
          <template #title> {{ t('system.refresh') }} </template>
        </a-tooltip>

        <column-setting v-model:checked="indexColumnChecked" v-bind="{ sortColumns, columns }"
          @change-select="onChangeSelectColumn" @reset="resetColumn" />
      </div>
    </a-col>

    <a-table :columns="tableColumns" :rowKey="(record: FixedAssetsConsuming) => record.id"
      :row-selection="selectColumnData" :data-source="tableData" :scroll="{ x: 1000 }" class="ant-table-striped"
      :row-class-name="
        (_record: FixedAssetsConsuming, index: number) => (index % 2 === 1 ? 'table-striped' : null)
      " :pagination="false" bordered>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'actions'">
          <slot name="operate" v-bind="record"></slot>
        </template>
        <template v-if="column.dataIndex === 'returning'">
          <a-descriptions-item label="归还中">
            <div v-if="record[column.dataIndex] != null">
              <a-switch v-model:checked="record[column.dataIndex]" :disabled="true" />
            </div>
            <span v-else-if="record['status'] != ApprovalStatus.Passed">
              <a-typography-text type="secondary">-</a-typography-text>
            </span>
            <span v-else>
              <a-typography-text type="secondary">已归还</a-typography-text>
            </span>
          </a-descriptions-item>
        </template>

        <template v-else-if="isEmpty(record[column.dataIndex]) && column.dataIndex !== 'actions'">
          <a-typography-text type="secondary">-</a-typography-text>
        </template>

        <template v-if="column.isCheck">
          <div v-if="isArray(record[column.dataIndex])" class="ap-table-list-tags">
            <a-tag color="cyan" v-for="(item, idx) in record[column.dataIndex]" :key="idx">
              <a @click="emit('check', column.dataIndex, item[column.name], item)">
                {{ item[column.name] }}
              </a>
            </a-tag>
          </div>
          <a-button v-else-if="isObject(record[column.dataIndex])" type="link" style="padding: 0" @click="
            emit(
              'check',
              column.dataIndex,
              record[column.dataIndex][column.name],
              record[column.dataIndex]
            )
          ">
            {{ record[column.dataIndex][column.name] }}
          </a-button>
          <a-typography-text v-else type="secondary">
            -
          </a-typography-text>
        </template>
        <template v-else-if="column.dataIndex !== 'actions' && record[column.dataIndex] == null && column.dataIndex != 'returning'">
          <a-typography-text type="secondary">
            -
          </a-typography-text>
        </template>

        <template v-else>
        </template>
      </template>
    </a-table>

    <a-col class="table-pagination" :span="24">
      <a-pagination show-size-changer v-model:current="pageParams.pageNum" v-model:page-size="pageParams.pageSize"
        :page-size-options="['10', '20', '30']" :total="props.total"
        :show-total="(total: number) => `${t('system.pagination.start')} ${total} ${t('system.pagination.end')}`"
        @change="emit('refresh')" />
    </a-col>
  </div>
</template>

<style lang="less" scoped>
.table-list {
  .table-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;

    .operate {
      display: flex;
      align-items: center;

      .operate-icon {
        margin-right: 12px;

        &.anticon,
        & .anticon {
          font-size: 20px;
        }
      }
    }
  }

  .table-pagination {
    text-align: right;
    margin-top: 20px;
  }
}
</style>
